<script>

export default {
  name: 'ElectricalDevice',
  props: {
    queryForm: {
      required: true
    },
    projectList: {
      required: true,
      default: []
    }
  },
  watch: {
    queryForm: {
      async handler(val) {
        if (val.sceneProjectId != null) {
          const param = {
            sceneProjectId: val.sceneProjectId,
            startDate: val.startTime,
            endDate: val.endTime
          }
          if (val.roomInfo != null && val.roomInfo.length > 0) {
            const sceneEdificeIds = []
            const sceneFloorIds = []
            const sceneRoomIds = []
            val.roomInfo.forEach(item => {
              if (item.length > 0) {
                sceneEdificeIds.push(item[0])
              }
              if (item.length > 1) {
                sceneFloorIds.push(item[1])
              }
              if (item.length > 2) {
                sceneRoomIds.push(item[2])
              }
            })
            param.sceneEdificeId = sceneEdificeIds.join(',')
            param.sceneFloorId = sceneFloorIds.join(',')
            param.sceneRoomId = sceneRoomIds.join(',')
          }
          const res = await this.$api.runtimeOptimizationReport.electricalEnergyConsumption(param)
          this.startTime = res.data.startTime
          this.endTime = res.data.endTime
          this.dataList = res.data.dataList
          this.$emit('electricalEnergyData', this.dataList)
          const elevatorEfficiencyRes = await this.$api.runtimeOptimizationReport.elevatorEfficiency(param)
          this.elevatorEfficiencyList = elevatorEfficiencyRes.data
          const airConditioningEfficiencyRes = await this.$api.runtimeOptimizationReport.airConditioningEfficiency(param)
          this.airConditioningEfficiencyList = airConditioningEfficiencyRes.data
        }
      },
      deep: true,
      immediate: true
    }
  },
  computed: {
    getProjectNames() {
      return this.projectList.filter(project => this.queryForm.sceneProjectId == null || project.value === this.queryForm.sceneProjectId)
        .map(project => project.label).join('，')
    },
    getElevatorEfficiencyMaxData() {
      if (this.elevatorEfficiencyList.length > 0) {
        return this.elevatorEfficiencyList.slice().sort((a, b) => b.efficiency - a.efficiency)[0]
      }
      return {}
    },
    getElevatorEfficiencyMinData() {
      if (this.elevatorEfficiencyList.length > 0) {
        return this.elevatorEfficiencyList.slice().sort((a, b) => a.efficiency - b.efficiency)[0]
      }
      return {}
    },
    getAirConditioningEfficiencyMaxData() {
      if (this.airConditioningEfficiencyList.length > 0) {
        return this.airConditioningEfficiencyList.slice().sort((a, b) => b.efficiency - a.efficiency)[0]
      }
      return {}
    },
    getAirConditioningEfficiencyMinData() {
      if (this.airConditioningEfficiencyList.length > 0) {
        return this.airConditioningEfficiencyList.slice().sort((a, b) => a.efficiency - b.efficiency)[0]
      }
      return {}
    },
    getMaxData() {
      if (this.dataList.length > 0) {
        return this.dataList.slice().sort((a, b) => b.value - a.value)[0]
      }
      return {}
    },
    getMinData() {
      if (this.dataList.length > 0) {
        return this.dataList.slice().sort((a, b) => a.value - b.value)[0]
      }
      return {}
    }
  },
  data() {
    return {
      startTime: null,
      endTime: null,
      dataList: [],
      elevatorEfficiencyList: [],
      airConditioningEfficiencyList: []
    }
  },
  methods: {}
}
</script>

<template>
  <div>
    <h2>03、用电设备的能效情况分析</h2>
    <div class="category-box">
      <h3>3.1、 分类统计能耗情况</h3>
      <div class="content">
        <table>
          <thead>
          <tr>
            <th>产品类型</th>
            <th>平均能效</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in dataList" :key="item.name">
            <td>{{ item.name }}</td>
            <td>{{ item.value / 100 }} %</td>
          </tr>
          </tbody>
        </table>
        <div class="desc">
          <p>
            展示量化场景在特定时间段内的重点用电设备的不同产品类型的平均能效情况。{{ getProjectNames }}在{{ startTime
            }}-{{ endTime }}中,
            总用电设备的平均能效为{{ dataList.length > 0 ? (dataList.map(item => item.value).reduce((a, b) => a + b, 0) / dataList.length) / 100 : 0
            }}%，
            其中{{ getMaxData.name }}的平均能效最高，为{{ getMaxData.value / 100 }}%；
            {{ getMinData.name }}的平均能效最低，为{{ getMinData.value / 100 }}%。</p>
        </div>
      </div>
    </div>
    <div class="elevator-box">
      <h3>3.2、 电梯的能效情况</h3>
      <div class="content">
        <table style="width: 80%; margin: 0 5%">
          <thead>
          <tr>
            <th>设备名称</th>
            <th>所属项目</th>
            <th>所属场景</th>
            <th>功率（kw）</th>
            <th>运行时间（h）</th>
            <th>用电量（kwh）</th>
            <th>能效</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in elevatorEfficiencyList" :key="item.id">
            <td>{{ item.meterDeviceName }}</td>
            <td>{{ item.sceneProjectName }}</td>
            <td>{{ item.sceneInfo }}</td>
            <td>{{ item.power }}</td>
            <td>{{ item.runningTime }}</td>
            <td>{{ item.meterValue }}</td>
            <td>{{ item.efficiency }}%</td>
          </tr>
          </tbody>
        </table>
        <div class="desc">
          <p>
            {{ getProjectNames }}在{{ startTime }}-{{ endTime }}中，{{ getElevatorEfficiencyMaxData.meterDeviceName }}的能效最高，为{{ getElevatorEfficiencyMaxData.efficiency }}%，
            {{ getElevatorEfficiencyMinData.meterDeviceName }}的能效最低，为{{ getElevatorEfficiencyMinData.efficiency }}%。
          </p>
        </div>
      </div>
    </div>
    <div class="charging-box">
      <h3>3.3、 空调的能效情况</h3>
      <div class="content">
        <table style="width: 80%; margin: 0 5%">
          <thead>
          <tr>
            <th>设备名称</th>
            <th>所属项目</th>
            <th>所属场景</th>
            <th>功率（kw）</th>
            <th>运行时间（h）</th>
            <th>用电量（kwh）</th>
            <th>能效</th>
          </tr>
          </thead>
          <tbody>
          <tr v-for="item in airConditioningEfficiencyList" :key="item.id">
            <td>{{ item.meterDeviceName }}</td>
            <td>{{ item.sceneProjectName }}</td>
            <td>{{ item.sceneInfo }}</td>
            <td>{{ item.power }}</td>
            <td>{{ item.runningTime }}</td>
            <td>{{ item.meterValue }}</td>
            <td>{{ item.efficiency }}%</td>
          </tr>
          </tbody>
        </table>
        <div class="desc">
          <p>
            {{ getProjectNames }}在{{ startTime }}-{{ endTime }}中,
            {{ getAirConditioningEfficiencyMaxData.meterDeviceName }}的能效最高，为{{ getAirConditioningEfficiencyMaxData.efficiency }}%，
            {{ getAirConditioningEfficiencyMinData.meterDeviceName }}的能效最低，为{{ getAirConditioningEfficiencyMinData.efficiency }}%。
          </p>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.category-box, .elevator-box, .charging-box {
  padding: 0 5%;

  table {
    border-collapse: collapse;
    width: 60%;
    margin: 0 10%;
    font-size: 16px;
    font-weight: 500;

    th {
      border: 1px solid rgba(0, 0, 0, 0.6);
      padding: 6px 10px;
      background-color: rgb(2, 149, 144);
      text-align: center;
    }

    td {
      border: 1px solid #000000;
      padding: 6px 10px;
      text-align: center;
    }
  }

  .content {
    padding: 0 5%;

    p {
      text-indent: 2em;
      line-height: 28px;
    }
  }
}
</style>
